<script setup lang="ts">
import { ref } from 'vue';

const props: any = defineProps<{
    ujt: any;
    opt: any;
}>();

const menus = [
    { label: '移动', value: 'menu1' },
    { label: '程序', value: 'menu2' },
    { label: '全局变量', value: 'menu3' },
    { label: 'I/O', value: 'menu4' },
    { label: '寄存器', value: 'menu5' },
];
</script>
<template>
    <div
        class="as-estun-right-menu-opt"
        @pointerdown.stop="opt.isMenuVisible = !opt.isMenuVisible"
    >
        关
    </div>
    <div class="as-estun-right-menu">
        <div
            v-for="item in menus"
            :key="item.value"
            @pointerdown.stop="opt.openPopup(item)"
            :class="{ cur: item.value === opt.curMenuItem.value }"
        >
            {{ item.label }}
        </div>
    </div>
</template>
<style scoped lang="scss">
.as-estun-right-menu-opt {
    cursor: pointer;
    height: 38px;
    text-align: center;
    background-color: var(--cm4);
}
.as-estun-right-menu {
    user-select: none;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    > div {
        width: 100%;
        text-align: center;
        line-height: 38px;
        cursor: pointer;
    }
    .cur {
        background-color: var(--ch2);
    }
}
</style>
